#main{
	.crow-img{
		position: relative;
		img{
			width: 100%;
		}
		.corver{
			position: absolute;
			z-index: 100;
			top: 0;
			bottom: 0;
			width: 100%;
			


			background-image: -moz-linear-gradient(top,  rgba(2, 20, 37, 0), rgba(2, 20, 37, 1)); /* Firefox */
			background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(2, 20, 37, 0)), color-stop(1, rgba(2, 20, 37, 1))); 
			background: -ms-linear-gradient(top, rgba(2, 20, 37, 0), rgba(2, 20, 37, 1));
		}

		label{
			position: absolute;
			top: 30%;
			left: 0;
			font-size: 25px;
			font-weight: bold;
			color: white;
			z-index: 101;
			text-align: center;
			width: 100%;

			background-color: transparent;

			padding-top: 10px;

			

			em{
				font-size: 15px;
				color: rgb(200,200,200);
				font-style: normal;
			}

		}

		@media(min-width: 768px){
			label{
				font-size: 30px;
				background-color: rgba(0, 0, 0, 0.5);
			}
		}
		
	}
}

#news{
	text-align: center;

	h2{
		text-align: left;
		margin-bottom: 5px;
		color: rgb(16, 136, 223);
	}
}

.news-card{
	border: 1px solid rgb(200, 200, 200);
	border-radius: 5px;
	width: 100%;
	margin-bottom: 20px;
	min-height: 155px;

	h3{
		margin-bottom: 10px;
	}

	p{
		text-align: left;
		font-size: 16px;
		color: rgb(150, 150, 150);
	}
}

@keyframes news-card-hover{
	from{
		transform: matrix(1,0,0,1,0, 0);
	}
	to{
		transform: matrix(1.06,0,0,1.06,-3, -4);
	}
}

@-webkit-keyframes news-card-hover{
	from{
		-webkit-transform: matrix(1,0,0,1,0, 0);
	}
	to{
		-webkit-transform: matrix(1.06,0,0,1.06,-3, -4);
	}
}

@-moz-keyframes news-card-hover{
	from{
		-moz-transform: matrix(1,0,0,1,0, 0);
	}
	to{
		-moz-transform: matrix(1.06,0,0,1.06,-3, -4);
	}
}

.news-card:hover{
	z-index: 100;

	animation: news-card-hover 0.2s ease-in;
	-webkit-animation: news-card-hover 0.2s ease-in;
	-moz-animation: news-card-hover 0.2s ease-in;
	animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;	
	-webkit-animation-fill-mode: forwards;

	box-shadow: 4px 5px 5px rgb(200, 200, 200);
}
.more{
	text-align: right;
}

#introduction{
	background-color: #0B618E;
	width: 100%;

	height: 300px;

	margin-top: 20px;

	clear: both;

	h2{
		color: white;
		font-size: 10px;

		margin-top: 80px;

		margin-bottom: 100px;
	}

	img{
		margin-top: 80px;
		width: 100%;
	}
}

@media(min-width:768px){
	#main {
		.crow-img{
			label{
				font-size: 50px;

				em{
					font-size: 25px;
				}
			}
		}

		.news-card{
			width: 90%;

			margin-left: 5%;
		}
	}

	#introduction{
		height: 400px;

		h2{
			font-size: 20px;
		}
		img{
			margin-top: 30px;
		}
	}
}

